<template>
    <div class="zixun" v-if="newsList.length">
      <div class="title">新闻资讯</div>

      <el-card v-for="(item,index) in newsList" :key="index">
        <div class="info" @click="enterInfo(item._id)">
          <img :src="item.img" alt="">
        <p>{{ item.txt }}</p>
        </div>
      </el-card>
    </div>
</template>

<script setup>
import { ref } from '@vue/reactivity';
import { useRouter } from 'vue-router';
import { getNews } from '../api';
let router=useRouter()
let newsList=ref([])
async function getNewsList(){
  let res=await getNews()
  console.log(res);
  if(res.code==200){
    newsList.value=res.data
  }
}

function enterInfo(id) {
  console.log(id);
  router.push(`/zixun/${id}`)
}
getNewsList()
</script>

<style lang="less" scoped>
.title {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.el-card {
  margin: 0 10px;
  border-radius: 20px;
}
.info {
  display: flex;
  height: 138px;
  overflow: hidden;

  img {
    width: 35%;
    border-radius: 10px;
  }

  p {
    padding: 5px 10px;
  }
}
</style>